<template>
  <panelhander :title="router.meta.name"  :text="router.meta.describe"/>

    <div class="btns">
    <el-button icon="plus" type="primary" @click="open(null)" size="small">新增</el-button>  
  </div>

  <el-table :data="tableData.list" style="width: 100%;">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="name" label="昵称"/>
    <el-table-column prop="permissionName" label="菜单权限"/>
    <el-table-column label="操作">
    <template #default="scope">
      <el-button type="primary" @click="open(scope.row)">编辑</el-button>
    </template>
    </el-table-column>
  </el-table>

  <div class="pagination-info">
    <el-pagination
      v-model:current-page="pagdata.pageNum"
      :page-size="pagdata.pageSize"
      :background="false"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>

  <el-dialog
    v-model="dialogFormVisavle" 
    :before-close="beforClose"
    title="添加权限"
    width="500" 
  >

  <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="form"
    :rules="rules"
    >

    <el-form-item v-show="false" prop="id">
        <el-input v-model="form.id">
        </el-input>
    </el-form-item>
    
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" placeholder="请填写权限名称"/>
    </el-form-item>
    <el-form-item label="权限" prop="permissions">
      <el-tree
        ref="treeRef"
        style="max-width: 600px;"
        :data="permissionData"
        node-key="id"
        show-checkbox
        :default-checked-keys="defkey"
      ></el-tree>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button type="primary" @click="confirm(formRef)">确认</el-button>
    </div>
  </template>

  </el-dialog>
</template>

<script setup name="Group" lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
import {userGetMenu ,userSetMenu,Menulist} from '../../m-tool/m-api/Mapi'
import { useRoute } from 'vue-router';

const router=useRoute()



onMounted(()=>{
  //菜单数据
  userGetMenu().then(({data})=>{
    permissionData.value=data.data
  })
  getListData()
})

//列表数据
const tableData=reactive({
  list:[],
  total:0

})


const pagdata=reactive({
  pageNum:1,
  pageSize:10
})
 function handleSizeChange(val){

 }
 function handleCurrentChange(val){
  getListData()

 }


//请求去列表数据
function getListData(){
  Menulist(pagdata).then(({data})=>{
    console.log(data);
    const {list,total}=data.data
    tableData.list=list
    tableData.total=total
  })
}


  //选中权限
  const defkey=[4,5]
  const treeRef=ref()
  const formRef=ref()

  //弹窗的显示与隐藏
  const dialogFormVisavle=ref(false)

  //form的数据
  const form=reactive({
          id:'',
          name:'',
          permissions:''
  })

  //表单校验规则
const rules=reactive({
  name:[{ required:true,trigger:'blur',message:'请输入权限名称'}]

})

  //树形菜单权限数据
  const permissionData=ref([])

  //关闭弹窗回调
  function beforClose(){
    dialogFormVisavle.value=false
    //重置表单
    formRef.value.resetFields()
    //teree选择重置
    treeRef.value.setCheckedKeys(defkey)
  }

  //打开弹窗
  function open(rowData={}){
    dialogFormVisavle.value=true
    //弹窗打开from生成异步的
    nextTick(()=>{
      if(rowData){
        Object.assign(form,{id:rowData.id,name:rowData.name,})
        treeRef.value.setCheckedKeys(rowData.permission)
      }
    })
  }


  //确认按钮事件
  async function confirm(formEl:any){
    if(!formEl) return
    await formEl.validate((valid:any,fields:any)=>{
      if(valid){
        //获取选则的数据
      const permissions=JSON.stringify(treeRef.value.getCheckedKeys())
        userSetMenu({name:form.name,permissions,id:form.id}).then(({data})=>{
          console.log(data);
          beforClose()
          getListData()
        })

      }else{
        console.log('error submit',fields)
      }
    })


  }


</script>

<style>

</style>